<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>沙漏加载动画</title>
    <style>
        body {
            /* 取消页面内外边距 */
            margin: 0;
            padding: 0;
            /* 100%窗口高度 */
            height: 100vh;



            /* 弹性布局 水平、垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变背景 */
            background: linear-gradient(200deg, #eeff00, #ff7b00);
        }

        .loading {
            width: 86px;
            height: 196px;
            /* 相对定位 */
            position: relative;
            /* 弹性布局 */
            display: flex;
            /* 将元素垂直显示 */
            flex-direction: column;
            /* 将元素靠边对齐 */
            justify-content: space-between;
            align-items: center;
            animation: rotating 2s linear infinite;
        }

        /* 沙漏上下两个容器 */
        .top,
        .bottom {
            width: 70px;
            height: 70px;
            border-style: solid;
            border-color: #ff0000;
            border-width: 4px 4px 12px 12px;
            border-radius: 50% 100% 50% 30%;
            position: relative;
            /* 这里把溢出的部分隐藏 */
            overflow: hidden;
        }

        .top {
            /* 旋转-45度 */
            transform: rotate(-45deg);
        }

        .bottom {
            /* 旋转135度 */
            transform: rotate(135deg);
        }

        /* 容器里的沙 */
        .top::before,
        .bottom::before {
            content: "";
            /* 绝对定位 */
            position: absolute;
            /* inherit表示继承父元素（这里指宽高） */
            width: inherit;
            height: inherit;
            background-color: #5809f7;
            /* 执行动画，先设置动画的参数，暂时不指定动画名称，我们在下面再来指定 */
            animation: 2s linear infinite;
        }

        .top::before {
            /* 通过设置圆角来改变沙的形状 */
            border-radius: 0 100% 0 0;
            /* 执行指定的动画 */
            animation-name: drop-sand;
        }

        .bottom::before {
            /* 通过设置圆角来改变沙的形状 */
            border-radius: 0 0 0 25%;
            /* 这里我们将下面的沙移出可视范围 */
            transform: translate(50px, -50px);
            /* 执行指定的动画 */
            animation-name: fill-sand;
        }

        /* 到这里我们还少了个沙子流下来的效果 */
        /* 添加流下的元素 */
        .loading::after {
            content: "";
            width: 5px;
            height: 96px;
            background-color: #ff0095;
            /* 绝对定位 */
            position: absolute;
            top: 20px;
            /* 执行动画：动画 时长 线性的 无限次播放 */
            animation: flow 2s linear infinite;
        }

        /* 接下来我们来定义动画 */
        /* 落沙动画 */
        @keyframes drop-sand {
            to {
                transform: translate(-50px, 50px);
            }
        }

        /* 填沙动画 */
        @keyframes fill-sand {
            to {
                transform: translate(0, 0);
            }
        }

        /* 沙流下动画 */
        @keyframes flow {

            10%,
            100% {
                transform: translateY(64px);
            }
        }

        /* 最后再来一个沙漏旋转的动画 */
        @keyframes rotating {

            0%,
            90% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
</body>

</html>